<template>
    <div class="componentContainer" :info="getComponentName">
        <component :is="componentName" :style="componentStyle"/>
    </div>
</template>

<script name="VueComponentComponent" setup lang="ts">
import {doThirdServiceValue} from "@/utils/lowcode/thirdService";
import {computed, defineProps, ref} from "vue";

let props = defineProps(['propJson', 'commonParam']);

let propJson = computed(() => {return props['propJson']})
let commonParam = computed(() => {return props['commonParam']})

let componentName = ref("");

let getComponentName = computed(async () => {
    await doThirdServiceValue(propJson.value.componentNameParam, commonParam.value, execComponentNameThen, execComponentNameCatch, {})
})

function execComponentNameThen(resValue, execParam) {
    if (resValue) {
        componentName.value = resValue
    } else {
        componentName.value = "CloseCircleOutlined"
    }
}

function execComponentNameCatch(resValue) {

}

let componentStyle = computed(() => {
    let style = "";
    if (propJson.value.fontSize) {
        style += "font-size: " + propJson.value.fontSize + ";"
    }
    if (propJson.value.isAlign) {
        style += "display: flex; align-items: center; justify-content: center;";
    }
    return style;
})
</script>

<style scoped lang="less">

</style>